import React, { useEffect, useState, useRef } from 'react'
import "./pagestpcss.css"

function PagesTpyh() {
 const imglist = [
    "https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N1450023461.jpg?uid=364&timestamp=1737442099&sign=9eca322badd53209cf072eb80697e442&imageMogr2%2Fthumbnail%2F245x%3E%2Fformat%2Fwebp",
    "https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N1451568794.jpg?uid=364&timestamp=1737442099&sign=9eca322badd53209cf072eb80697e442&imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp",
    "https://photo-static-api.fotomore.com/creative/vcg/veer/400/new/VCG41N587230494.jpg?uid=364&timestamp=1737442099&sign=9eca322badd53209cf072eb80697e442&imageMogr2%2Fthumbnail%2F346x%3E%2Fformat%2Fwebp",
    "https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N873825806.jpg?uid=364&timestamp=1737442099&sign=9eca322badd53209cf072eb80697e442&imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp",
  ]
  const imgmap = imglist.map((item, index) => {
    return <li key={index} style={{ width: '140px', height: '80px', marginLeft: '5px' }}><img src={item} alt="" style={{ width: '100%', height: '100%' }} /></li>
  })
  const slider = useRef(null)
  const btn = (e) => {

    let target = e.target
    // 右按钮
    if (target.className === 'next-btn') {
      slider.current.style.left = '-420px ';
      slider.current.style.transition = 'all 3s';
    }
    // 左按钮
    if (target.className === 'prev-btn') {
      slider.current.style.left = '0px';
    }
  }
  return (
    <div>
      <div>
        <div className="slider-container" onClick={btn}>
          <div className="slider" ref={slider}>
            {imgmap}
          </div>
          <button className="prev-btn">&#10094;</button>
          <button className="next-btn">&#10095;</button>
        </div>
      </div>
    </div>
  )
}

export default PagesTpyh
